<template>
    <div class="app-layout">

      <!-- 顶部 header -->
      <header class="header">
        <h1>{{ routerLinkRef }}</h1>
      </header>

      <div class="main-content">

        <!-- 左侧导航 -->
         <!-- 冒泡事件 -->
        <nav class="sidebar" @click="handleNavClick">
          <!-- 直接路径写法 -->
          <router-link to="/viewone">页面1,组件挂载时机</router-link><br>
          <!-- 对象路径写法 -->
          <router-link :to="{path:'/viewtwo'}">页面2,hooks的使用</router-link><br>
          <!-- 对象name属性写法 -->
          <router-link :to="{name:'three'}">页面3,标签元素使用ref</router-link><br>
          <!-- replace属性,是否能返回上一路由 -->
          <router-link replace :to="{name:'four'}">页面4,组件prop传递</router-link><br>
          <!-- 路径query参数: 模板字符串直接拼接 -->
          <!-- <router-link :to="`/viewfive?a=${param}`">页面5，query参数</router-link><br> -->
          <!-- 路径query参数: 对象写法 -->
          <router-link :to="{path:'/viewfive',query:{a:param}}">页面5,query路径参数</router-link><br>
          <!-- 路径param参数写法，前提是要在路由里留出位置 -->
          <!-- <router-link to="/viewsix/1/2">页面6，param传递</router-link><br> -->
          <!-- param对象写法，同上留出位置（可以？不传）,不能传对象或者数组等,并且只能name！ -->
          <router-link :to="{name:'six',params:{a:1,b:2}}">页面6,param路径参数</router-link><br>
          <!-- param的参数变成props接收 -->
          <router-link :to="{name:'seven',params:{a:1,b:2}}">页面7,param参数prop接收</router-link><br>
          <!-- 自己决定将params或者query参数变成props接收,在index里配置 -->
          <router-link :to="{name:'eight',query:{a:1,b:2}}">页面8,自己选参数prop接收</router-link><br>
          <!-- 编程式路由跳转,有push和replace2个选项，to里能写什么这里就能写什么 -->
          <button @click="$router.push({name:'eight',query:{a:3,b:4}})">编程式路由跳转页面8</button><br>
          <!-- pinia的使用 -->
          <router-link to="/viewnine">页面9,读取pinia的数据</router-link><br>
          <!-- 父子之间的props传递 -->
          <router-link to="/viewten">页面10,组件通信</router-link><br>

        </nav>

        <!-- 右侧路由展示区域 -->
        <div class="router-view">
          <router-view></router-view>
        </div>

      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import {ref} from 'vue'
  const param = ref('我是组件5的query参数')

  // 定义模板引用
  const routerLinkRef = ref<HTMLElement | null>(null);

  /**
  * 处理导航栏点击事件
  * 当点击a标签时，获取链接文本并赋值给routerLinkRef
  * @param event - 点击事件对象
  */
  const handleNavClick = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  if (target.tagName === 'A') {
    const linkText = target.textContent;
    if (linkText) {
      // console.log(`点击了 ${linkText} 链接`);
      routerLinkRef.value = linkText;
    }
  }
  };
  
  </script>
  
<style scoped>
  
  .app-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .header {
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
  }
  
  .main-content {
    flex: 1;
    display: flex;
  }
  
  .sidebar {
    background-color: #f4f4f4;
    width: 300px;
    padding: 1rem;
  }
  
  .router-view {
    flex: 1;
    padding: 1rem;
  }
  button {
    /* background-color: #007bff; */
    color: green;
    border: none;
    padding: 0.5rem 1rem;
    margin-bottom: 2rem;
    cursor: pointer;
    border-radius: 4px;
  }
  
</style>
